import React, {Component} from 'react'
import Block from 'fs-flex'
import {List, Modal, Radio, Toast} from 'antd-mobile';
import {routerRedux} from 'dva/router';
import {createForm} from 'rc-form';
import {connect} from 'dva'
import Header from '../../components/Header/index';
// import styles from './index.less';
import PaihaoService from '../../services/paihaoService';
import Canstant from '../../utils/constant'
import qs from 'qs'

const Item = List.Item;
const Brief = Item.Brief;
const operation = Modal.operation;
const RadioItem = Radio.RadioItem;

// 排号/选择日期节目
class TimeSlotForPH extends Component {
  state = {
    businessType: null,//业务类型ID
    businessTypeName: null,//业务类型ID
    date: null,//选择的预约日期
    timeSlotVo: null,
    temporary: null,
    temporaryAvailable: null,
    tody: null,
    timeSlotList: [],//选择的预约日期
    companyDisplay: true,//控制是否需要输入
    RESERVATION_TYPE: [{
      id: 'FIXED',
      sysValue: '固定预约'
    }, {
      id: 'TEMP',
      sysValue: '临时预约'
    }],
  }

  async componentDidMount() {
    const {location} = this.props
    const {businessType} = qs.parse(location.search.split('?')[1])
    const {date} = qs.parse(location.search.split('&')[1])
    const {code, data} = await PaihaoService.getTimeSlotQueueInfoForBusinessIdAndDate(businessType, date)
    if (code === Canstant.responseOK) {
      this.setState({
        timeSlotVo: data,
        timeSlotList: data.timeSlotList,
        temporary: data.temporary,
        temporaryAvailable: data.temporaryAvailable,
        tody: data.tody,
        businessType: businessType || null,
        date: date,
      })
      let business = await PaihaoService.queryBusinessTypeName(businessType)
      if (code === Canstant.responseOK) {
        this.setState({
          businessTypeName: business.data.busitype,
        })
      }


    }
  }

  //跳转链接
  gotoPH = (reservation_type, timeSlotId, startTime, endTime) => {
    const {dispatch} = this.props
    if (!this.state.businessType) {
      Toast.fail('请选择业务类型', 1)
      return
    }
    let url = `/ph/push?businessType=${this.state.businessType}&d=${this.state.date}&r=` + reservation_type + `&t=` + timeSlotId + `&s=` + startTime + `&e=` + endTime
    dispatch(routerRedux.push(url))
  };

  // 休息日样式——未选中
  restDay = {
    backgroundColor: 'rgb(245, 213, 213)',
  }
  exceed = {
    backgroundColor: 'rgb(230,230,250)',
  }

  // 休息日样式——未选中
  woekDay = {
    backgroundColor: 'rgb(187 255 255)',
    color: '#888', fontSize: '12px'
  }
  isEmptyObject=(obj)=>{
    for(var n in obj){
      console.log("不空");
      return false}
    return true;
  }
  renderUserMessage(item) {
    if (item.available) {
      if (item.enableTimeSlot) {
        //已经超过排号时间
        return (<Item arrow="empty" extra="已过" multipleLine style={this.exceed}>
          剩余排号数量：0 <Brief> {item.startTime}-{item.endTime}</Brief>
        </Item>)
      } else {
        return (
          <Item arrow="horizontal" extra="预约" multipleLine onClick={() => this.gotoPH(this.state.RESERVATION_TYPE[0].id,
            item.timeSlotId, item.startTime, item.endTime)}>
            剩余排号数量：{item.eableAcceptNo} <Brief> {item.startTime}-{item.endTime}</Brief>
          </Item>
        );
      }
    } else {
      return (
        <Item arrow="empty" style={this.restDay} extra="已满" multipleLine>
          剩余排号数量：0 <Brief> {item.startTime}-{item.endTime}</Brief>
        </Item>
      );
    }
  }


  renderTemporaryMessage(temporary, temporaryAvailable) {
    console.log("temporaryAvailable"+temporaryAvailable)
    if (this.state.tody) {
      if (temporaryAvailable) {
        return (
          <List renderHeader={() => '临时预约'} className="my-list">
            <Item arrow="horizontal" extra="预约" multipleLine
                  onClick={() => this.gotoPH(this.state.RESERVATION_TYPE[1].id,
                    0, 0, 0)}>
              临时排号 <Brief> 剩余排号数量：{temporary}</Brief>
            </Item>
          </List>

        );
      } else {
        return (
          <List renderHeader={() => '临时预约'} className="my-list">
            <Item arrow="empty" style={this.restDay} extra="已满" multipleLine>
              临时排号 <Brief> 剩余排号数量：0</Brief>
            </Item>
          </List>
        );
      }
    }
  }

  nullList(timeSlotList) {
    if (!this.isEmptyObject(timeSlotList)) {
      return (
        <List renderHeader={() => '定时预约'} className="my-list">
          {timeSlotList.map(item => (
            this.renderUserMessage(item)
          ))}
        </List>
      );
    } else {
      return (<List renderHeader={() => '定时预约'} className="my-list">
        <Item arrow="empty" extra="无预约时段" multipleLine/>
      </List>);
    }

  }

  render() {
    const {timeSlotList, temporary, temporaryAvailable} = this.state
    return (
      <Block>
        <Block>
          <Header needBack={true} history={this.props.history} title='预约排号'/>
        </Block>
        <Block mt={10} fs={14} h={30} a='c' j='c' style={{color: '#888', fontSize: '12px',}}>
          <span>{this.state.businessTypeName}</span>
        </Block>
        <Block mt={5}>
          {this.nullList(timeSlotList)}
        </Block>
        <Block>
          {this.renderTemporaryMessage(temporary, temporaryAvailable)}
        </Block>
      </Block>
    )
  }
}

export default connect()(createForm()(TimeSlotForPH))
